<template>
	<view class="page">
		<view class="search">
			<view class="cearch-list" :class="hourglassShow==true?'cearch-list1':''">
				<view class="search-left">
					<view class="left-one" @tap="timeShow=true">
						<view>
							<text>出发</text>
							<text
								style="color:#111111 ; margin: 0 10rpx;">{{FormData.arriveDate.substring(5,10)}}</text>
						</view>
						<view>
							<text>返程</text>
							<text style="color:#111111 ; margin: 0 10rpx;">{{FormData.leaveDate.substring(5,10)}}</text>
						</view>
					</view>
					<view class="left-two">
						共{{count}}天
					</view>
					<view class="left-three">
						<u-icon name="search" size="30"></u-icon>
					</view>
				</view>
				<view class="search-right">
					<input :model="FormData.name" @change='search' placeholder="请输入酒店名称" class="input" />
				</view>
			</view>
		</view>
		<view class="tab">
			<view class="searchCondition">
				<!-- 区域筛选 -->
				<span class="item" @click="areaShowed" :class="areaShow==true?'arrow-up-fill':''">
					<u-icon name="arrow-down-fill" bold='true' v-if="areaShow==false" size="20" label="区域"
						labelPos="left" labelSize="26"></u-icon>
					<u-icon name="arrow-up-fill" bold='true' v-else color="#007a68" labelColor='#007a68' size="20"
						label="区域" labelPos="left" labelSize="26"></u-icon>
				</span>
				<!-- 价格筛选 -->
				<span class="item" @click="listShowed">
					<u-icon name="arrow-down-fill" bold='true' v-if="listShow==false" size="20" :label="listVal"
						labelPos="left" labelSize="26"></u-icon>
					<u-icon name="arrow-up-fill" bold='true' v-else color="#007a68" labelColor='#007a68' size="20"
						:label="listVal" labelPos="left" labelSize="26"></u-icon>
				</span>
				<!-- 特色筛选 -->
				<span class="item" @click="sortShowed" :class="sortShow==true?'arrow-up-fill':''">
					<u-icon name="arrow-down-fill" bold='true' v-if="sortShow==false" size="20" :label="sortVal"
						labelPos="left" labelSize="26"></u-icon>
					<u-icon name="arrow-up-fill" bold='true' v-else color="#007a68" labelColor='#007a68' size="20"
						:label="sortVal" labelPos="left" labelSize="26"></u-icon>
				</span>
				<!-- 销量 -->
				<span class="item" @click="Salesed(Sales)" :class="Sales==true?'arrow-up-fill':''">
					<u-icon name="arrow-up-fill" bold='true' v-if="Sales==false" size="20" :label="SalesVal"
						labelPos="left" labelSize="26"></u-icon>
					<u-icon name="arrow-down-fill" bold='true' v-else color="#007a68" labelColor='#007a68' size="20"
						:label="SalesVal" labelPos="left" labelSize="26"></u-icon>
				</span>
			</view>
		</view>
		<!--  区域筛选 -->
		<view class="content" :style="{'height':(h-mt)+'px'}" v-show="areaShow">
			<view class="custom_popup">
				<view class="types">
					<view class="pricequjian" style="height: 240rpx;">
						<view class="jiage" v-for="(item, index) in list1" :key="index"
							@click="clickareaShow(item, index)">
							<view class="contentpeice" :class="{'Doublactive': item.region}">
								{{item.name}}
								<view class="xuanzhong" v-if="item.region">
									<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
										alt="">
								</view>
							</view>
						</view>
					</view>
					<view class="u-btn">
						<view class="left" @click="del">
							<text> 重置</text>
						</view>
						<view class="right" @click="add">
							<text>确定</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--  价格筛选 -->
		<view class="content" :style="{'height':(h-mt)+'px'}" v-show="listShow">
			<view class="custom_popup">
				<view class="types">
					<text class="title" style="margin: 30rpx 0;">价格</text>
					<view style="padding: 0 10rpx 10rpx;">
						<slide-range ref="slideRange" :scale="{interval:1500}" min="0" max="1500" :key="update"
							height="8" @change="changeSlide" :value="slideVal" :activeStyle="{'background':'#007A69'}"
							:backgroundStyle="{'background':'#EFEFEF'}">
							<template #firstBlock>
								<image class="block-image"
									src="https://i.ringzle.com/file/20240407/317a2774538f432cacc768c0b257b73b.png">
								</image>
							</template>
							<template #secondBlock>
								<image class="block-image"
									src="https://i.ringzle.com/file/20240407/317a2774538f432cacc768c0b257b73b.png">
								</image>
							</template>
						</slide-range>
					</view>
					<view class="pricequjian" style="height: 230rpx;">
						<view class="jiage" v-for="(item, index) in priceList" :key="index"
							@click="clickprice(item, index)">
							<view class="contentpeice" :class="{'Doublactive': currentIndex == item.id}"
								v-if='item.priceEnd==null'>
								{{item.priceStart}}
								<view class="xuanzhong" v-if="currentIndex == item.id">
									<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
										alt="">
								</view>
							</view>
							<view class="contentpeice" :class="{'Doublactive': currentIndex == item.id}"
								v-else-if='item.priceStart==null'>
								{{item.priceEnd}}
								<view class="xuanzhong" v-if="currentIndex == item.id">
									<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
										alt="">
								</view>
							</view>
							<view class="contentpeice" :class="{'Doublactive': currentIndex == item.id}" v-else>
								{{item.priceStart}}-{{item.priceEnd}}
								<view class="xuanzhong" v-if="currentIndex == item.id">
									<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
										alt="">
								</view>
							</view>
						</view>
					</view>
					<view class="u-btn">
						<view class="left" @click="del">
							<text> 重置</text>
						</view>
						<view class="right" @click="add">
							<text>确定</text>
						</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 特色筛选 -->
		<view class="content" :style="{'height':(h-mt)+'px'}" v-show="sortShow">
			<view class="custom_popup">
				<view class="types">
					<view class="title" style="margin: 30rpx 0;"> 酒店类型 </view>
					<view class="text" style="display: flex; flex-wrap: wrap;">
						<view class="pricequjian" style="height: 100rpx; width: 100%;">
							<view class="jiage1" v-for="(item, index) in typeList" :key="index"
								@click="radioType(item.dictValue, index)">
								<view class="contentpeice" :class="{'Doublactive': typeIndex == index}">
									{{item.dictLabel}}
									<view class="xuanzhong" v-if="typeIndex == index">
										<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
											alt="">
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="u-btn">
						<view class="left" @click="del">
							<text> 重置</text>
						</view>
						<view class="right" @click="add">
							<text>确定</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-calendar title="选择日期" startText="出发" endText="返程" :maxDate="maxDate" :defaultDate="defaultDate"
			confirmDisabledText="请选择日期" :formatter="formatter" :show="timeShow" :mode="mode" @confirm="confirm"
			@close="timeShow=false" ref="calendar" :closeOnClickOverlay="true">
		</u-calendar>
	</view>
</template>

<script>
	const d = new Date();
	const year = d.getFullYear();
	let month = d.getMonth() + 1;
	month = month < 10 ? `0${month}` : month;
	const date = d.getDate();
	
	var maxQueryDayNum = '';
	import slideRange from "@/components/tianzai-slider-range/index.vue";
	export default {
		components: {
			slideRange
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				mt1: uni.getSystemInfoSync().statusBarHeight + 39,
				count: '',
				FormData: {
					name: '',
					endPortNo: '',
					startPortNo: '',
					arriveDate: '', //	到达时间(yyyy-MM-dd)
					leaveDate: '', //离开时间(yyyy-MM-dd)
					limit: 10, //每页显示记录数
					page: 1, //当前页码
					priceSort: '', //价格排序: 1有高高低, 0由低到高
					priceStart: '',
					priceEnd: '',
					category: '', //	酒店类别(逗号分割): 字典HotelCategory
					featureLabels: '', //	特色服务(逗号分割):字典FeatureLabels
				},
				hourglassShow: false,
				timeShow: false,
				areaShow: false,
				listShow: false,
				sortShow: false,
				Sales: false,
				listVal: '价格',
				sortVal: '筛选',
				SalesVal: '销量',
				AddressList: [],
				list1: [{
					name: '全部',
					id: ''
				}],
				areaShowIndex: 0,
				regionList: [],
				priceIndex: 0,
				featureIndex: 0,
				typeIndex: null,
				featureLabelsLIst: [],
				currentIndex: 0,
				areaShowIndex: 0,
				featureList: [],
				slideVal: [100, 300],
				priceList: [{
						id: 0,
						priceStart: '不限',
						priceEnd: null,
					},
					{
						id: 1,
						priceStart: '0',
						priceEnd: '150以下',
					},
					{
						id: 2,
						priceStart: '150',
						priceEnd: '200',
					},
					{
						id: 3,
						priceStart: '200',
						priceEnd: '350',
					},
					{
						id: 4,
						priceStart: '350',
						priceEnd: '650',
					},
					{
						id: 5,
						priceStart: '650',
						priceEnd: '1050',
					},
					{
						id: 6,
						priceStart: '1050',
						priceEnd: '1500',
					},
					{
						id: 7,
						priceStart: null,
						priceEnd: '1500以上',
					},
				],
				typeList: [],
				maxDate: '',
				defaultDate: new Date().Format('yyyy-MM-dd'),
				mode: 'range',
			}
		},
		created() {
			this.FormData.arriveDate = new Date().Format('yyyy-MM-dd');
			this.FormData.leaveDate = new Date(new Date().setDate(new Date().getDate() + 1)).Format('yyyy-MM-dd');
			let start = new Date(this.FormData.arriveDate).getTime();
			let end = new Date(this.FormData.leaveDate).getTime();
			let time = end - start;
			let day = parseInt(time / (1000 * 60 * 60 * 24));
			this.count = day;
			this.getAddressList();
			this.getDict();
			this.getMaxDate();
		},
		mounted() {
			this.$refs.calendar.setFormatter(this.formatter);
		},
		methods: {
			getMaxDate() {
				this.$api.get('/travel/isshipsaleconfig/page').then(res => {
					if (res.data.code === 0) {
						if (res.data.data.list.length > 0) {
							maxQueryDayNum = res.data.data.list[0].wysts;
							this.maxDate = new Date(new Date().setDate(new Date().getDate() + (+maxQueryDayNum))).Format('yyyy-MM-dd');
							// this.canQueryStart = res.data.data.list[0].wtimeS;
							// this.canQueryEnd = res.data.data.list[0].wtimeE;
							// uni.setStorageSync('maxQueryDayNum', this.maxQueryDayNum);
						}
					} else this.$showModal(res.data.msg);
				})
			},
			formatter(day) {
				if (maxQueryDayNum) {
					for (let i = 0; i <= +maxQueryDayNum; i++) {
						let now = new Date(new Date().getFullYear() + '-' + day.month + '-' + day.day).Format(
							'yyyy-MM-dd');
						let temp = new Date(new Date().setDate(new Date().getDate() + i)).Format('yyyy-MM-dd');
						if (now == temp) {
							day.bottomInfo = '可售'
						}
					}
					return day
				}
			},
			// 搜索
			search(val) {
				this.FormData.name = val.detail.value;
				this.$emit('toSearch', this.FormData);
			},
			changeSlide(e) {
				this.FormData.priceStart = e.firstValue;
				this.FormData.priceEnd = e.secondValue;
			},
			areaShowed() {
				this.areaShow = !this.areaShow;
				this.listShow = false;
				this.sortShow = false;
			},
			listShowed() {
				this.listShow = !this.listShow;
				this.sortShow = false;
				this.areaShow = false;
			},
			sortShowed() {
				this.sortShow = !this.sortShow;
				this.listShow = false;
				this.areaShow = false;
			},
			Salesed(type) {
				this.listShow = false;
				this.areaShow = false;
				this.sortShow = false;
				this.Sales = !this.Sales;
				this.$emit('toSort', type);
			},
			// 获取区域
			getAddressList() {
				this.$api.get("/api/hotel/selectScenicList", this.FormData).then((res) => {
					this.AddressList = res.data.data;
					this.AddressList.forEach(item => {
						this.list1.push({
							name: item.scenicName,
							id: item.id
						})
					})
					this.list1.forEach((item, index) => {
						this.$set(this.list1[index], 'region', false)
					})
				});
			},
			getDict() {
				this.$api.get('/sys/dict/type/all').then(res => {
					this.typeList = res.data.data.find((p) => p.dictType == 'HotelCategory').dataList;
					this.featureList = res.data.data.find((p) => p.dictType == 'FeatureLabels').dataList;
					this.featureList.forEach((item, index) => {
						this.$set(this.featureList[index], 'select', false)
					})
				})
			},
			// 区域筛选
			clickareaShow(e, i) {
				this.areaShowIndex = i;
				this.FormData.islandId = e.id;
				this.regionList = [];
				this.$set(this.list1[i], 'region', !this.list1[i].region);
				if (i == 0) {
					this.list1.forEach((item, index) => {
						if (index > 0 && this.list1[i].region) {
							this.$set(this.list1[index], 'region', false)
						}
					})
				} else {
					this.$set(this.list1[0], 'region', false)
				}
			},
			clickprice(e, i) {
				this.currentIndex = i;
				if (e.id == 0) {
					this.FormData.priceStart = '';
					this.FormData.priceEnd = '';
					this.slideVal = [parseFloat(e.priceStart), parseFloat(e.priceEnd)];
					this.$nextTick(() => {
						this.$refs.slideRange.create();
					})
				} else if (e.id == 1) {
					this.FormData.priceStart = '';
					this.FormData.priceEnd = 150;
					this.slideVal = [parseFloat(e.priceStart), parseFloat(e.priceEnd)];
					this.$nextTick(() => {
						this.$refs.slideRange.create();
					})
				} else if (e.id == 7) {
					this.FormData.priceStart = 1500;
					this.FormData.priceEnd = '';
					this.slideVal = [parseFloat(1500), parseFloat(1500)];
					this.$nextTick(() => {
						this.$refs.slideRange.create();
					})
				} else {
					this.slideVal = [parseFloat(e.priceStart), parseFloat(e.priceEnd)];
					this.$nextTick(() => {
						this.$refs.slideRange.create();
					})
					this.FormData.priceStart = e.priceStart;
					this.FormData.priceEnd = e.priceEnd;
				}
			},
			// 酒店类型筛选
			radioType(item, index) {
				this.typeIndex = index;
				this.FormData.category = item;
			},
			reset() {
				this.listShow = false; //价格筛选
				this.sortShow = false; //特色
				this.areaShow = false; //区域
				this.list1.forEach((d, i) => {
					this.$set(this.list1[i], 'region', false);
				})
				this.priceIndex = null;
				this.featureIndex = null;
				this.typeIndex = null;
				this.FormData.featureLabels = ''
				this.featureLabelsLIst = [];
				this.FormData.priceSort = ''
				this.FormData.category = ''
				this.currentIndex = 0;
				this.areaShowIndex = 0;
				this.FormData.priceStart = '';
				this.FormData.priceEnd = '';
				this.featureList.filter(item => item.select = false);
				this.list1.filter(item => item.region = false);
				this.FormData.islandId = ''
				this.regionList = [];
				this.slideVal = [100, 300];
			},
			// 重置
			del() {
				this.reset();
				this.$nextTick(() => {
					this.$refs.slideRange.create();
				})
				this.$emit('toSearch', this.FormData);
			},
			// 确定
			add() {
				this.listShow = false; //价格筛选
				this.areaShow = false; //三镇四乡 筛选
				this.sortShow = false; //特色
				let list2 = this.list1.filter(item => item.region == true);
				list2.forEach(item => {
					this.regionList.push(item.id)
				})
				this.FormData.islandId = this.regionList.toString();
				this.$emit('toSearch', this.FormData);
			},
			confirm(e) {
				let start = new Date(e[0]).getTime();
				let end = new Date(e[e.length - 1]).getTime();
				let time = end - start;
				let day = parseInt(time / (1000 * 60 * 60 * 24));
				let arriveDate = e[0]; // 截取第一个字符
				let leaveDate = e[e.length - 1]; // 截取最后一个字符
				this.FormData.arriveDate = arriveDate;
				this.FormData.leaveDate = leaveDate;
				this.count = day;
				this.timeShow = false;
				this.$emit('toSearch', this.FormData);
			},
		}
	}
</script>

<style scoped lang="less">
	.page {
		.content {
			width: 100%;
			padding: 0 24rpx;
			box-sizing: border-box;
			position: relative;
		}

		.custom_popup {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .4);
			top: 0;
			left: 0;
			position: absolute;
			z-index: 999;

			.types {
				width: 100%;
				padding: 30rpx 30rpx 56rpx;
				box-sizing: border-box;
				background: #FFFFFF;

				.block-image {
					width: 48rpx;
					height: 48rpx;
				}

				.title {
					font-size: 30rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #111111;
					line-height: 42rpx;
				}

				.items {
					margin-top: 10rpx;
					display: flex;
					flex-wrap: wrap;
					margin-left: -24rpx;

					&>view {
						width: calc(100% / 3 - 24rpx);
						height: 64rpx;
						background: rgba(0, 122, 105, .06);
						border-radius: 16rpx;
						line-height: 64rpx;
						text-align: center;
						margin-top: 20rpx;
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #111111;
						margin-left: 24rpx;

						&.active {
							background: #007A69;
							font-weight: bold;
							color: #FFFFFF;
						}
					}
				}
			}
		}

		.searchCondition {
			width: 100%;
			// position: relative;
			// background-color: #f5f9fa;
			// margin-top: 8rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			// height: 60rpx;
			// padding-top: 30rpx;

			.item {
				margin: auto auto;

				.u-icon {
					justify-content: center;
				}
			}

		}

		.pricequjian {
			display: flex;
			flex-wrap: wrap;
			// height: 400rpx;
			justify-content: space-between;
			// justify-content: flex-end;
		}

		.Doublactive {
			background-color: #F0F7F6 !important;
			color: #007A69 !important;
			border: 1px solid #007A69 !important;

		}

		.jiage {
			margin: 0 7rpx;
			width: 22%;
			height: 68rpx;

			.contentpeice {
				border-radius: 12rpx;
				background: #F4F7F9;
				width: 100%;
				height: 100%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #333333;
				line-height: 68rpx;
				text-align: center;
				font-style: normal;
				position: relative;

				.xuanzhong {
					width: 30rpx;
					height: 25rpx;
					position: absolute;
					bottom: 0rpx;
					right: 0rpx;
					border-top-left-radius: 10rpx;
					background: #007A69;
					display: flex;
					align-items: center;
					justify-content: center;

					img {
						width: 16rpx;
						height: 16rpx;
					}
				}
			}

		}

		.jiage1 {
			margin: 0 7rpx;
			width: 30%;
			height: 68rpx;

			.contentpeice {
				border-radius: 12rpx;
				background: #F4F7F9;
				width: 100%;
				height: 100%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #333333;
				line-height: 68rpx;
				text-align: center;
				font-style: normal;
				position: relative;

				.xuanzhong {
					width: 30rpx;
					height: 25rpx;
					position: absolute;
					bottom: 0rpx;
					right: 0rpx;
					border-top-left-radius: 10rpx;
					background: #007A69;
					display: flex;
					align-items: center;
					justify-content: center;

					img {
						width: 16rpx;
						height: 16rpx;
					}
				}
			}

		}





		// .hourglas {
		// 	box-sizing: border-box;
		// 	// height: 90vh;
		// 	// padding: 230rpx 48rpx;
		// 	padding: 80rpx 48rpx 50rpx;

		.hander-one {
			.title {
				font-size: 30rpx;
				color: #111111;
				margin: 48rpx 0 24rpx;
			}

			.text {
				display: flex;
				width: 654rpx;
				flex-wrap: wrap;
			}
		}

		.u-btn {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;

			.left,
			.right {
				width: 300rpx;
				height: 88rpx;
				border-radius: 50rpx;
				border: 1rpx solid #007A69;
				font-size: 32rpx;
				text-align: center;
				display: flex;
				align-items: center;

				text {
					margin: 0 119rpx;
				}
			}

			.left {
				color: #007A69;
			}

			.right {
				color: #fff;
				background-color: #007A69;
			}
		}

		.u-page__tag-item {
			// display: flex;
			color: #333333 !important;
			font-size: 24rpx !important;
			margin: 24rpx 0 0;
		}


		.search {
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;

			.cearch-list {
				background: #f5f8fa;
				display: flex;
				border-radius: 50rpx;
				width: 100%;
				height: 86rpx;
				line-height: 30rpx;

				.search-left {
					display: flex;

					.left-one {
						margin: 15rpx 0 30rpx 30rpx;

						view {
							// display: block;
							// margin: 10rpx 10rpx;
							color: #999999;
							font-size: 20rpx;
							width: 120rpx;
						}
					}

					.left-two {
						width: 65rpx;
						// display: block;
						margin: 28rpx 10rpx;
						color: #111111;
						font-size: 20rpx;
						border-right: 1rpx solid #999999;
						padding-right: 16rpx;
					}

					.left-three {
						margin: 28rpx 10rpx;

						.u-icon__icon {
							font-size: 40rpx !important;
						}
					}
				}

				.search-right {
					// background: aqua;

					.input {
						// background: #FF4141;
						width: 300rpx;
						height: 100%;
					}
				}
			}

			.cearch-hourglass {

				display: flex;
				align-items: center;
				text-align: center;
				margin: 0 10rpx;
			}

			.icon {
				font-size: 60rpx;
				position: absolute;
				right: 20%;
				top: 16rpx;
			}
		}

		.tab {
			width: 100%;
			height: 80rpx;
			display: flex;
			margin-top: 12rpx;

			.tab-list {
				width: 100%;
				height: 80rpx;

				.tab {
					display: flex;
					flex-wrap: nowrap;
				}
			}

			.serchicon {
				display: flex;
				align-items: center;

				.u-icon {
					width: 22rpx;
					height: 22rpx;
				}
			}
		}
	}
</style>

<style scoped lang="less">
	.active {
		background-color: #E4F4FF !important;
		color: #007A69 !important;
	}

	.cearch-list1 {
		width: 700rpx !important;
	}


	.pop-hourglassShow {

		.u-transition {
			// background-color: rgba(0, 0, 0, 0) !important;
		}

		// .u-popup__content,
		.u-transition {
			top: 100rpx !important;
		}
	}

	.u-calendar-month__days__day {
		height: 104rpx !important;
	}

	.u-tabs__wrapper__nav__line {
		left: 30rpx !important;
		bottom: 1rpx !important;
	}

	.u-calendar__confirm .u-button {
		width: calc(100% - 24rpx) !important;
		height: 88rpx !important;
		background: #007A69 !important;
		border-radius: 44rpx !important;
	}

	.u-calendar__confirm .u-button text {
		font-size: 32rpx !important;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff !important;
	}

	.u-calendar scroll-view {
		height: 600rpx !important;
	}
</style>


<style scoped lang="less">
	.u-icon__label {
		font-size: 26rpx !important;
		font-weight: bold !important;
	}

	// .u-mini {
	// 	height: 36rpx !important;
	// 	line-height: 36rpx !important;
	// }

	// .u-icon__icon {
	// 	font-size: 40rpx !important;
	// }

	.u-calendar-month__days__day {
		height: 104rpx !important;
	}

	.u-calendar__confirm .u-button {
		width: calc(100% - 24rpx) !important;
		height: 88rpx !important;
		background: #007A69 !important;
		border-radius: 44rpx !important;
	}

	.u-calendar__confirm .u-button text {
		font-size: 32rpx !important;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF !important;
	}

	.u-calendar scroll-view {
		height: 600rpx !important;
	}
</style>

<style lang="scss" scoped>
	.hander {
		position: fixed;
		top: 117rpx;
		height: 200rpx;
		z-index: 10;
	}

	.hander-hander {
		background-color: #fff;
		width: 100%;
		height: 200rpx;

	}

	.search {
		display: flex;
		box-sizing: border-box;
		// padding: 48rpx 24rpx 12rpx;
		margin: 10rpx 12rpx;
		position: relative;
		z-index: 16;

		.cearch-list {
			background: #f5f8fa;
			display: flex;
			border-radius: 50rpx;
			width: 100%;
			height: 86rpx;
			line-height: 30rpx;

			.search-left {
				display: flex;

				.left-one {
					margin: 15rpx 0 30rpx 30rpx;

					view {
						// display: block;
						// margin: 10rpx 10rpx;
						color: #999999;
						font-size: 20rpx;
						width: 120rpx;
					}
				}

				.left-two {
					width: 65rpx;
					// display: block;
					margin: 28rpx 10rpx;
					color: #111111;
					font-size: 20rpx;
					border-right: 1rpx solid #999999;
					padding-right: 16rpx;
				}

				.left-three {
					margin: 28rpx 10rpx;

					.u-icon__icon {
						font-size: 40rpx !important;
					}
				}
			}

			.search-right {
				// background: aqua;

				.input {
					// background: #FF4141;
					width: 300rpx;
					height: 100%;
				}
			}
		}

		.cearch-hourglass {

			display: flex;
			align-items: center;
			text-align: center;
			margin: 0 10rpx;
		}

		.icon {
			font-size: 60rpx;
			position: absolute;
			right: 20%;
			top: 16rpx;
		}
	}

	.serchicon {
		width: 120rpx;

		.u-icon {
			width: 80rpx !important;
			height: 80rpx !important;
			// background-color: aqua;
		}
	}

	.tab {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		padding: 0 16rpx;
		border-top: 1rpx solid #EFEFEF;
		border-bottom: 1rpx solid #EFEFEF;
		box-sizing: border-box;
		background-color: #fff;

		.tab-list {
			width: 100%;
			height: 80rpx;

			.tab {
				display: flex;
				flex-wrap: nowrap;
			}
		}

		.serchicon {
			display: flex;
			align-items: center;

			.u-icon {
				width: 22rpx;
				height: 22rpx;
			}
		}
	}

	.showCard {
		box-sizing: border-box;
		padding-top: 26.5%;
		height: 100vh;
	}

	.card {
		box-sizing: border-box;
		background: #f5f8fa;
		padding: 24rpx;
		// height: 1000rpx;
		height: 100%;


		.card-store {
			margin: 0 0 20rpx;
			display: flex;
			background-color: #fff;
			width: 702rpx;
			height: 240rpx;
			border-radius: 10rpx;

			.card-left {
				width: 200rpx;
				height: 240rpx;
				position: relative;
				// border-radius: 10rpx 0 0 10rpx;

				image {
					border-radius: 16rpx 0 0 16rpx;
					width: 100%;
					height: 100%;
				}

				.text {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 20rpx;
					color: #FFFFFF;
					background: #FF7D01;
					border-radius: 16rpx 0 18rpx 0;
					padding: 2rpx 3rpx;
				}


			}

			.card-right {
				padding: 24rpx;

				.card-title {
					font-weight: 600;
					width: 458rpx;
					font-size: 30rpx;
					color: #111;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 显示的行数 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					/* 隐藏超出部分 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
				}

				.card-text {
					margin: 12rpx 0;
				}

				.card-text1 {
					width: 200rpx;
					display: flex;
					justify-content: space-between;


					.text {
						display: block;
						display: flex;
						color: #777777;
						font-size: 24rpx;
						border: 1rpx solid #6e6e6e;
					}

				}

				.card-price {
					padding: 8rpx;
					display: flex;
					justify-content: space-between;
					font-size: 38rpx;
					color: #FF4141;
				}
			}
		}
	}

	.card1 {
		margin: 24rpx;
	}

	.ticketList {
		width: 702rpx;
		height: 592rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 25rpx;
		padding-bottom: 40rpx;

		.images {
			border-radius: 16rpx 16rpx 0 0;
			width: 702rpx;
			height: 380rpx;
		}

		&_tag {
			display: flex;
			margin: 20rpx;
		}

		text {}

		&_price {
			display: flex;
			justify-content: space-between;

			button {
				margin-right: 24rpx;
				margin-top: -15rpx;
			}

			&_money {
				width: 92rpx;
				height: 28rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FF4141;
				line-height: 28rpx;
				display: flex;
				margin-left: 24rpx;
				margin-top: 14rpx;
			}
		}
	}
</style>